<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>锄大地计分器</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/vant/4.8.2/index.min.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.staticfile.net/vue/3.3.4/vue.global.prod.min.js"></script>
    <script src="https://cdn.staticfile.net/vant/4.8.2/vant.min.js"></script>

    <style>
        html,
        body,
        #app {
            height: 100%;
           
        }

        #app {
            background: url('./bg.png') no-repeat;
            background-size: 100% 100%;
             margin:0 auto;
            max-width:800px;
            position:relative;

        }

        .form {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .form .van-cell-group {
            margin-bottom: 10px;
        }

        .form .header {
            margin-bottom: 30px;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            color: rgb(17, 223, 242);
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="form">
            <div class="header">玩家创建</div>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field maxlength="4" label-width="50px" clearable v-model="form.user1" name="user1" label="玩家1"
                        placeholder="请输入玩家1姓名" :rules="[{ required: true, message: '请填写' }]" />

                </van-cell-group>

                <van-cell-group inset>
                    <van-field maxlength="4" label-width="50px" clearable v-model="form.user2" name="user2" label="玩家2"
                        placeholder="请输入玩家2姓名" :rules="[{ required: true, message: '请填写' }]" />

                </van-cell-group>
                <van-cell-group inset>
                    <van-field maxlength="4" label-width="50px" clearable v-model="form.user3" name="user3" label="玩家3"
                        placeholder="请输入玩家3姓名" :rules="[{ required: true, message: '请填写' }]" />

                </van-cell-group>
                <van-cell-group inset>
                    <van-field maxlength="4" label-width="50px" clearable v-model="form.user4" name="user4" label="玩家4"
                        placeholder="请输入玩家4姓名" :rules="[{ required: true, message: '请填写' }]" />

                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        开始游戏
                    </van-button>
                </div>
            </van-form>
        </div>


    </div>

    <script>

        function genID(length) {
            return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
        }

        const app = Vue.createApp({
            data() {
                return {
                    form: {
                        user1: '',
                        user2: '',
                        user3: '',
                        user4: '',
                    },

                }
            },

            mounted() {
               const username = localStorage.getItem("USERNAME")
               if(username){
                window.location.replace("index.html")
               }
            },
            methods: {
                onSubmit(e) {
                    console.log(e)
                    localStorage.setItem("USERNAME",JSON.stringify(e))
                    window.location.replace("index.html")
                }
            }
        })
        //
        app.use(vant);

        //
        // // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // // 可以通过下面的方式手动注册
        app.use(vant.Lazyload);
        app.mount('#app')
    </script>


</body>

</html>